<template>
    <div class="item" :style="{ background: bgc }">
        <div style="width: 30%;">
            <img :src="getImage(icon)" alt="" width="100%">
        </div>
        <div class="content">
            <h4>{{ title }}</h4>
            <h5>{{ content }}</h5>
        </div>
    </div>
</template>

<script setup>
import { getImage } from '@/utils';
defineOptions({
    name: 'DashNewsItem'
})

const props = defineProps({
    title: {
        type: String,
        default: '我是标题'
    },
    content: {
        type: String,
        default: "详细介绍信息哈哈哈哈哈哈哈哈哈哈哈"
    },
    bgc: {
        type: String,
        default: 'rgb(175,102,33)'
    },
    icon: {
        type: String,
        default: 'png19_03.png'
    }
})

console.log(props.bgc)
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    padding: 40px 30px;
    max-width: 300px;
    color: white;
    text-align: right;
    font-size: 14px;
    min-height: 10px;
    flex: 1;
}

.content {
    width: 70%;

    h4 {

        font-size: 30px;
        font-weight: normal;
        padding-bottom: 10px;
    }
}
</style>